<template>
  <div>
    <div class="flex main-list" @click="$router.push('/CatItem')">
      <!-- 左边图片 -->
      <div class="main-img">
        <img src="../assets/images/pet.png" alt="">
      </div>
      <!-- 右边列表 -->
      <div class="main-list-item">
        <h1>美美</h1>
        <div class="main-message">
          <span>1岁</span>
          <span>妹妹</span>
          <span>朝阳区</span>
        </div>
        <div class="main-title">白色汤圆</div>
        <div class="main-kind">
          <span>已免疫</span>
          <span>已驱虫</span>
          <span>未绝育</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
props:['title']
}
</script>

<style lang="scss" scoped>
 .main-list {
      margin-bottom: 1rem;

      .main-img {
        img {
          border-radius: 10px;
          // overflow: hidden;
        }
      }

      .main-list-item {
        padding-left: 1rem;
        padding-top: 0.5rem;

        h1 {
          font-size: 1rem;
          font-weight: 600;
          color: #524F5E;
        }

        color: #8C8A99;

        .main-message {
          margin-top: 1rem;

          span {
            background-color: #F5F5F5;
            font-size: 0.8rem;
            margin-right: 0.2rem;
            padding: 0.3rem;
          }
        }

        .main-title {
          margin-top: 0.8rem;
          font-size: 0.8rem;

        }

        .main-kind {
          margin-top: 1.5rem;

          span {
            padding: 0.3rem;
            border: 1px solid #8D73EC;
            color: #8D73EC;
            font-size: 0.5rem;
            margin-right: 0.5rem;
          }

        }

      }
    }
</style>